<template>
	<view class="">
		<!-- <DateRangePicker /> -->
		<date-range-picker></date-range-picker>
		<!-- <view class="input-search">
		    <input type="text" value placeholder="合同监管码或合同编号" />
		    <iconfont icon="search" :size="20" color="#999"></iconfont>
		</view> -->
		<view class="cu-bar search bg-white margin-top-sm">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" :adjust-position="false" type="text" placeholder="合同监管码或合同编号" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round"  @click="search">搜索</button>
			</view>
		</view>
		<view class="list">
			<view class="list-cell">
				<view class="list-cell-body">
					<view class="list-cell-body-info">
						<view>合同监管码：1533346548</view>
						<view>合同编号：54226113</view>
						<view>网签日期：2019-2-1</view>
					</view>
					<view class="list-cell-body-status">
						<view>网签状态：未网签</view>
						<view>备案状态：未备案</view>
					</view>
				</view>
				<view class="list-cell-btn">
					<!-- <view class="list-cell-btn-repeal">申请撤销</view> -->
					<!-- <view class=" cu-btn  line-green round"  @click="editContract()">编辑合同</view>					 -->
					<view class="list-cell-btn-edit " @click="editContract()">编辑合同</view> 
				</view>
			</view>
			<view class="list-cell">
				<view class="list-cell-body">
					<view class="list-cell-body-info">
						<view>合同监管码：1533346548</view>
						<view>合同编号：54226113</view>
						<view>网签日期：2019-2-1</view>
					</view>
					<view class="list-cell-body-status">
						<view>网签状态：网签受理</view>
						<view>备案状态：未备案</view>
					</view>
				</view>
				<view class="list-cell-btn">
					<view class="list-cell-btn-repeal" @click="revocationContract">申请撤销</view>	
					<!-- <view class="cu-btn  line-red  round" @click="revocationContract">申请撤销</view>			 -->
					<view class="list-cell-btn-edit " @click="editContract()">编辑合同</view>
					<!-- <view class="cu-btn  line-green round"  @click="editContract()">编辑合同</view>		 -->
				</view>
			</view>
			<view class="list-cell">
				<view class="list-cell-body">
					<view class="list-cell-body-info">
						<view>合同监管码：1533346548</view>
						<view>合同编号：54226113</view>
						<view>网签日期：2019-2-1</view>
					</view>
					<view class="list-cell-body-status">
						<view>网签状态：网签受理</view>
						<view>备案状态：未备案</view>
					</view>
				</view>
				<view class="list-cell-btn">
					<view class="list-cell-btn-repeal" @click="revocationContract">申请撤销</view>			
					<!-- <view class="cu-btn  line-red  round" @click="revocationContract">申请撤销</view>	 -->
					<view class="list-cell-btn-edit " @click="editContract()">编辑合同</view>
					<!-- <view class="cu-btn  line-green round"  @click="editContract()">编辑合同</view>		 -->
				</view>
			</view>
		</view>
		<pagination 
			:current-page="currentPage" 
			:page-size="pageSize"
			@current-change="pageChange"
			:total="total"
		></pagination>
	</view>
</template>

<script>
// import iconfont from "@/components/iconfont/inconfont.vue";
import DateRangePicker from "@/components/date-range-picker/date-range-picker.vue";
import pagination from '@/components/pagination/pagination';
export default {
	components: {
		// iconfont,
		pagination,
		DateRangePicker
	},
	data () {
		return {
			currentPage: 3,
			pageSize: 10,
			total: 26,
		}
	},
	methods: {
		pageChange(val) {
			this.currentPage = val;
		},
		editContract () {
			uni.navigateTo({
				url: "/pages/contract-edit/contract-edit"
			})
		},
		revocationContract () {
			uni.navigateTo({
				url: '/pages/contract-revocation/contract-revocation',
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
@import "@/style/mixins/utils.scss";
// 状态颜色 字体大小
$status-color: #ea4a4f;
$status-font-size: 36upx;
$edit-primary-color: #67d915;
// 申请撤销
$repeal-primary-color: #e51c23;
page {
	// background: #fff;
}
.list-cell{
	margin: 20upx 4upx;
	border: 1px solid #ccc;
	border-radius: 20upx;
	padding: 15upx;
	box-sizing: content-box;
	background: #fff;
	&-body {
		display: flex;
		@include utils-clearfix;
		&-info, &-status {
			width: 50%;
		}
		&-info {
			// float: left;
		}
		&-status {
			float: right;
			view {
				font-size: $status-font-size;
			}
			color: $status-color;
		}
	}
	&-btn {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-around;
		&-repeal,
		&-edit {
			// margin: 2upx 
			padding:  0 20upx;
			border-radius: 6upx;
			box-shadow: 0 0 6upx #444;
			color: #fff;
			background: $edit-primary-color;
		}
		&-repeal {
			background: $repeal-primary-color;
		}
	}
}
</style>
